<template>
	<div class="analysis">
		<Collapse v-model="value">
			<Panel name="1">
				健康问题
				<div class="wrapbox" slot="content">
					<Button class="addbutton" icon="plus-round" type="dashed" @click="showHealth">新增健康问题</Button>
					<div class="header">健康问题</div>
					<v-table ref="vTable" :tableColumns="tableColumns" :tableData="tableData"></v-table>
				</div>
			</Panel>
			<Panel name="2">
				原因分析
				<div class="wrapbox" slot="content">
					<Button class="addbutton" icon="plus-round" type="dashed" @click="showReason">新增原因分析</Button>
					<div class="header">原因分析</div>
					<v-table ref="vTableTwo" :tableColumns="tableColumnsTwo" :tableData="tableData2"></v-table>
				</div>
			</Panel>
			<Panel name="3">
				管理目标
				<div class="wrapbox" slot="content">
					
					<div class="header">管理目标</div>
					<Input v-model="targetData.goal" disabled type="textarea" :autosize="{minRows: 5}" placeholder="Enter something..."/>
					<div class="button-box">
						<Button type='primary' class="editTarget" @click="showTarget">编辑</Button>
					</div>
				</div>
			</Panel>
		</Collapse>
		<!-- 健康问题编辑框 -->
		<Modal v-model="isHealthShow" :width="400" class-name="eidthform" :mask-closable='false'>
			<p slot="header">{{ editFormTitle }}</p>
			<Form ref="healthForm" :model="healthData" :rules="healthRules" :label-width="70">
				<FormItem label="疾病:">
	                <Input type="text" v-model="healthData.disease" placeholder="请输入疾病名称"></Input>
	            </FormItem>
	            
	            <FormItem label="疾病认知:">
	                <Input type="textarea" :autosize="{minRows: 5}" v-model="healthData.diseaseCognition" placeholder="请输入疾病认知"></Input>
	            </FormItem>
	            <FormItem label="生活问题:">
	                <Input type="textarea" :autosize="{minRows: 5}" v-model="healthData.lifeIssues" placeholder="请输入生活问题"></Input>
	            </FormItem>
			</Form>
			<div slot="footer" class="button-box">
	            <Button type="primary" :loading="healthKeep"  @click="keepHealth('healthForm')">保存</Button>
	            <Button type="ghost" @click="healthCancel('healthForm', 'isHealthShow')">取消</Button>
	        </div>
		</Modal>
	
		<!-- 原因分析编辑框 -->
		<Modal v-model="isReasonShow" :width="430" class-name="eidthform" :mask-closable='false'>
			<p slot="header">{{editFormTitle2}}</p>
			<Form ref="reasonForm" :model="resonData" :label-width="120">
				<FormItem label="家族史原因:">
	                <Input type="textarea" :autosize="{minRows: 5}" v-model="resonData.familyCases" placeholder="请输入家族史原因"></Input>
	            </FormItem>
	            <FormItem label="生活习惯原因:">
	                <Input type="textarea" :autosize="{minRows: 5}" v-model="resonData.live" placeholder="请输入生活习惯原因"></Input>
	            </FormItem>
	            <FormItem label="其他疾病引起原因:">
	                <Input type="textarea" :autosize="{minRows: 5}" v-model="resonData.liveReason" placeholder="请输入其他疾病引起原因"></Input>
	            </FormItem>
			</Form>
			<div slot="footer" class="button-box">
	            <Button type="primary" :loading="reasonKeep"  @click="keepReason('reasonForm')">保存</Button>
	            <Button type="ghost" @click="reasonCancel('reasonForm', 'isReasonShow')">取消</Button>
	        </div>
		</Modal>
		
		<!-- 管理目标编辑 -->
		<Modal v-model="isTargetShow" :width="600" class-name="eidthform" :mask-closable='false'>
			<p slot="header">管理目标编辑</p>
			<Form ref="targetForm" :model="targetData" :label-width="10">
				<FormItem label="">
	                <Input type="textarea" v-model="targetData.goal" :autosize="{minRows: 5}"></Input>
	            </FormItem>
			</Form>
			<div slot="footer" class="button-box">
	            <Button type="primary" :loading="targetKeep"  @click="keepTarget('targetForm')">保存</Button>
	            <Button type="ghost" @click="targetCancel('targetForm', 'isTargetShow')">取消</Button>
	        </div>
		</Modal>
		
	</div>
</template>
<!-- 疾病分析及管理目标 -->
<script>
	
	import vTable from '@/components/common/Table.vue';
	
	export default {
		components: {
			vTable
		},
		data(){
			return { 
				editFormTitle: '',
				editFormTitle2: '',
				customer_id: '',
				ImprovePeriodicalId: '',
				value: '1',    //  默认展开第一层 
				isHealthShow: false,
				healthKeep: false,
				isReasonShow: false,
				reasonKeep: false,
				isTargetShow: false,
				targetKeep: false,
				healthRules: {
					name: [{ required: true, message: "请输入疾病名称" }]
				},
				tableColumns: [
					{ type: "index", align: "center", width: 60 },
			        { title: "疾病", key: "disease", align: "center" },
			        { title: "疾病认知", key: "diseaseCognition", align: "center" },
			        { title: "生活问题", key: "lifeIssues", align: "center" },
			        {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: { type: 'primary', size: 'small' },
                                    style: { marginRight: '5px' },
                                    on: {
                                        click: () => {
                                        	console.log(params)
                                        	this.isHealthShow = true;   //  弹出健康问题编辑框
                                        	this.editFormTitle = '编辑健康问题';
                                        	this.healthData = JSON.parse(JSON.stringify(params.row));   //  赋值
                                        	this.healthData.customer_id = this.$route.query.customer_id; // 赋值  customer_id
                                        }
                                    }
                                }, '编辑')
                            ]);
                        }
                    }
				],
				tableColumnsTwo: [
					{ type: "index", align: "center", width: 60 },
			        { title: "家族史原因", key: "familyCases", align: "center" },
			        { title: "生活习惯原因", key: "live", align: "center" },
			        { title: "其他疾病引起原因", key: "liveReason", align: "center" },
			        {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: { type: 'primary', size: 'small' },
                                    style: { marginRight: '5px' },
                                    on: {
                                        click: () => {
                                        	this.isReasonShow = true;   //  弹出健康问题编辑框
                                        	this.editFormTitle2 = '编辑原因分析';
                                        	this.resonData = JSON.parse(JSON.stringify(params.row));   //  赋值
                                        	this.resonData.customer_id = this.$route.query.customer_id; // 赋值  customer_id
                                        }
                                    }
                                }, '编辑')
                            ]);
                        }
                    }
				],
				tableData: [],
				tableData2: [],
				// 健康问题
				healthData: {
					customer_id: '',
					disease: '',
					diseaseCognition: '',
					lifeIssues: '',
					id: ''
				},
				// 原因分析
				resonData: {
					customer_id: '',
					familyCases: '',
					live: '',
					liveReason: '',
					id: ''
				},
				// 管理目标
				targetData: {
					customer_id: '',
					goal: '',
					id: ''
				}
			}
		},
		created(){
			this.ImprovePeriodicalId = this.$route.params.id;  //  周刊id
			
			// 传值  
			this.customer_id = this.$route.query.customer_id;  //  用户id
//			this.customer_id = this.$route.params.id;
			this.healthData.customer_id = this.$route.query.customer_id;  //  用户id
			
			this.resonData.customer_id = this.$route.query.customer_id;  //  用户id
			this.targetData.customer_id = this.$route.query.customer_id;  //  用户id
			this.getData();
		},
		methods: {
			//  清空 健康问题
			resetHealthData(){
				this.healthData.disease = '';
				this.healthData.diseaseCognition = '';
				this.healthData.lifeIssues = '';
			},
			//  清空原因分析
			resetReasonData(){
				this.resonData.familyCases = '';
				this.resonData.live = '';
				this.resonData.liveReason = '';
			},			
			// 修改健康问题
			editHealth(){
				const update_health_question = '/improve/update_health_question/' + this.customer_id + '?ImprovePeriodicalId=' + this.ImprovePeriodicalId;
				this.$http.post(update_health_question, this.healthData)
				.then((res)=>{
					this.getData();
		            this.isHealthShow = false;
				})
				.catch((err)=>{
					console.log(err)
				})
			},
			// 新增 健康问题
			addHealth(){
				const add_health_question = '/improve/add_health_question/' + this.customer_id + '?ImprovePeriodicalId=' + this.ImprovePeriodicalId;
				this.$http.post(add_health_question, this.healthData)
					.then((res)=>{
						if(res.data.status === 1){
							this.$Notice.warning({
								title: res.data.message
							})
						}
//						console.log(res)
						this.getData();
		            	this.isHealthShow = false;
					})
					.catch((err)=>{
						console.log(err);
					})
			},
			//  新增 保存健康问题 
			keepHealth(refName){
				console.log(this.healthData)
				// 通过 判断 标题来 请求接口 
				if(this.editFormTitle === '新增健康问题') {
					this.addHealth()
					
				} else if(this.editFormTitle === '编辑健康问题') {
					this.editHealth();
				}
			},
			//  弹出 健康问题编辑框
			showHealth(){
				this.editFormTitle = '新增健康问题';
				this.isHealthShow = true;
				this.resetHealthData();   //  清空healthData 数据
			},			
			//  健康问题取消弹框
			healthCancel(refName, showName){
				this.$refs[refName].resetFields();
				this[showName] = false;
			},
			
			//  修改 原因分析 
			editReason(){
				const update_cause_analysis = '/improve/update_cause_analysis/' + this.customer_id + '?ImprovePeriodicalId=' + this.ImprovePeriodicalId;
				this.$http.post(update_cause_analysis, this.resonData)
				.then((res)=>{
					this.getData();
					this.isReasonShow = false;
				})
				.catch((err)=>{
					console.log(err);
				})
			},
			// 新增  原因分析
			addReason(){
				const add_cause_analysis = '/improve/add_cause_analysis/' + this.customer_id + '?ImprovePeriodicalId=' + this.ImprovePeriodicalId;
				this.$http.post(add_cause_analysis, this.resonData)
				.then((res)=>{
					if(res.data.status === 1){
						this.$Notice.warning({
							title: res.data.message
						})
					}
//					console.log(res)
					this.getData();
		            this.isReasonShow = false;
				})
				.catch((err)=>{
					console.log(err);
				})
			},
			//  保存原因分析编辑
			keepReason(refName){
				// 通过 判断 标题来 请求接口 
				if(this.editFormTitle2 === '新增原因分析') {
					this.addReason();
					
				} else if(this.editFormTitle2 === '编辑原因分析') {
					this.editReason();
				}
			},
			//  弹出 
			showReason(){
				this.editFormTitle2 = '新增原因分析';
				this.isReasonShow = true;
				this.resetReasonData();   //  清空healthData 数据
			},
			//   原因分析取消弹框
			reasonCancel(refName, showName){
				this.$refs[refName].resetFields();
				this[showName] = false;
			},
		
		//  显示  管理目标 
			showTarget(){
				this.isTargetShow = true;
			},
			//  修改  管理目标
			editTarget(){
				const update_managerment_goal = '/improve/update_managerment_goal/' + this.customer_id + '?ImprovePeriodicalId=' + this.ImprovePeriodicalId;
				this.$http.post(update_managerment_goal, this.targetData)
				.then((res)=>{
					console.log(res)
					this.getData();
					this.isTargetShow = false;
				})
				.catch((err)=>{
					console.log(err);
				})
			},
			// 新增  管理目标  
			addTarget(){
				const add_managerment_goal = '/improve/add_managerment_goal/' + this.customer_id + '?ImprovePeriodicalId=' + this.ImprovePeriodicalId;
				this.$http.post(add_managerment_goal, this.targetData)
				.then((res)=>{
					console.log(res)
					this.getData();
					this.isTargetShow = false;
				})
				.catch((err)=>{
					console.log(err);
				})
			},
			//  保存管理目标
			keepTarget(){
//				// 通过 判断 targetData goal  是否有数据来   请求接口 
				if(this.targetData.id !== '') {
					this.editTarget();
				} else {
					this.addTarget();
				}
			},
			//  管理目标取消 
			targetCancel(refName, showName){
				this.$refs[refName].resetFields();
				this[showName] = false;
			},
			// 获取数据
			getData(){
				// 并发请求
				//      this.customer_id   411 替换成  this.customer_id
				const health_questionApi = '/improve/health_question/' + this.customer_id + '?ImprovePeriodicalId=' + this.ImprovePeriodicalId;   //  健康问题  API
				const cause_analysisApi = '/improve/cause_analysis/' + this.customer_id + '?ImprovePeriodicalId=' + this.ImprovePeriodicalId;    //  用户原因分析  API
				const management_goalApi = '/improve/management_goal/' + this.customer_id + '?ImprovePeriodicalId=' + this.ImprovePeriodicalId;   //管理目标API
				this.$http.all([
					this.$http.get(health_questionApi),
					this.$http.get(cause_analysisApi),
					this.$http.get(management_goalApi)
				])
				.then(this.$http.spread((res1,res2,res3)=>{
					console.log(res3)
					//  因后台传过来的是对象，但tableData需要的是数据，所以需要加 [ ]
					if(res1.data.data !== null){
						this.tableData = [res1.data.data];
					}
					if(res2.data.data !== null){
					this.tableData2 = [res2.data.data];
					}
					if(res3.data.data !== null){
						this.targetData.goal = res3.data.data.goal;
						this.targetData.id = res3.data.data.id;
					}
				}))
				.catch((err)=>{
					console.log(err);
					this.$Notice.error({ title: "改善方案数据获取失败！" });
				})
			}
		}
		
	}
	
</script>

<style lang="less" scoped>
	.analysis{
		margin-left: 30px;
		
		.wrapbox {
			margin: 20px;
			.header{
				height: 40px;
				text-align: center;
				font-size: 20px;
				line-height: 40px;
				color: #fff;
				background: #0B9595;
				border-radius: 5px;
			}
			.button-box {
				width: 100%;
				text-align: center;
				
				.editTarget {
					margin-top: 20px;
				}
			}
		}
		
	}
</style>